import React, { useContext } from 'react';
import TodoContext from '../../context';

const TodoItem = (props) => {
  const { id, title, completed } = props;
  const { removeTodoItem, toggleTodoItem } = useContext(TodoContext);

  return (
    <div className="bg-white rounded-lg shadow-md p-5 hover:shadow-lg transition-shadow duration-200">
      <div className="flex justify-between items-center mb-3">
        <span className="text-xs font-semibold text-indigo-600 bg-indigo-50 px-3 py-1 rounded-full">
          代办事项
        </span>
        <span
          onClick={() => {
            removeTodoItem(id);
          }}
          className="text-red-500 hover:text-red-700 font-bold cursor-pointer text-lg"
        >
          X
        </span>
      </div>
      <div className="text-lg text-gray-800 font-medium mb-3">{title}</div>
      <div className="flex justify-between items-center">
        <span className={`text-sm font-medium ${completed ? 'text-green-600' : 'text-orange-600'}`}>
          {completed ? '已完成' : '未完成'}
        </span>
        <span
          onClick={() => {
            toggleTodoItem(id);
          }}
          className="text-sm text-indigo-600 hover:text-indigo-800 cursor-pointer font-medium hover:underline"
        >
          切换为{completed ? '未完成' : '已完成'}
        </span>
      </div>
    </div>
  );
};

export default TodoItem;
